<template>
  <div class="login">
    <div class="login-header">
      <div class="login-header-searchbox">
        <el-input v-model="input" placeholder="请输入内容" class="login-header-searchbox1"></el-input>
        <el-button type="primary" icon="el-icon-search" class="login-header-searchbutton">搜索</el-button>
      </div>
    </div>
    <div class="login-main">
      <div class="login-main-price1">
        <router-link to="/drug">
          <img src="/src/assets/药物查询.png" alt="" class="login-main-price1-logo" height="60px" width="60px">
          <p>药物查询</p>
        </router-link>
        <router-link to="/about">
          <img src="/src/assets/多人.png" alt="" class="login-main-price1-logo" height="60px" width="60px">
          <p>老友圈</p>
        </router-link>
        <router-link to="/home">
          <img src="/src/assets/咨询管理 咨询服务 管理.png" class="login-main-price1-logo" alt="" height="60px" width="60px">
          <p>线上咨询</p>
        </router-link>
      </div>
      <div class="login-main-price2">
        <div class="fu-gongnenglan">
          <router-link to="/heart">
            <img src="/src/assets/心跳.png" alt="" height="30px" width="30px" class="login-main-price2-logo" >
            <p>心率</p>
          </router-link> 
        </div>
        <div class="fu-gongnenglan">
          <router-link>
            <img src="/src/assets/shequ服务xin.png" alt="" height="30px" width="30px" class="login-main-price2-logo">
            <p>社区服务</p>
          </router-link>
        </div>
        <div class="fu-gongnenglan">
          <router-link>
            <img src="/src/assets/医保 医保卡.png" alt="" height="30px" width="30px" class="login-main-price2-logo">
            <p>医保</p>
          </router-link>
        </div>
        <div class="fu-gongnenglan">
          <router-link>
            <img src="/src/assets/kaozuoxin.png" alt="" height="30px" width="30px" class="login-main-price2-logo">
            <p>服务站</p>
          </router-link>
        </div>
        <div class="fu-gongnenglan">
          <router-link>
            <img src="/src/assets/老年旅行.png" alt="" height="30px" width="30px" class="login-main-price2-logo">
            <p>老年旅行</p>
          </router-link>
        </div>
      </div>
      </div>
      <div class="block">
         <div id="app">
           <Carousel />
         </div>
      </div>
      <div class="login-navigation">
       <div class="login-navigation-bottombar">
        <div class="login-navigation-bottombar-logo">
          <router-link to="/">
              <img src="/src/assets/dianpuxin.png" alt="" height="18px" width="25px">
              <p>首页</p>
           </router-link> 
        </div>
        <div class="login-navigation-bottombar-logo">
          <img src="/src/assets/xingqiuxin.png" alt="" height="18px" width="25px">
          <p>动态</p>
        </div>
        <div class="login-navigation-bottombar-logo">
          <img src="/src/assets/lingdangxin.png" alt="" height="18px" width="25px">
          <p>消息</p>
        </div>
        <div class="login-navigation-bottombar-logo">
          <img src="/src/assets/huiyuanxin.png" alt="" height="18px" width="25px">
          <p>会员</p>
        </div>
        <div class="login-navigation-bottombar-logo">
          <router-link to="/myworld">
             <img src="/src/assets/gerenxin.png" alt="" height="18px" width="25px">
             <p>我的</p>
           </router-link>
        </div>
       </div>
       <div class="login-main-activities">
        <img src="/public/fengjing1.jpeg" alt="" height="120px" width="200px">
       </div>
       <div class="yanglaotu">
        <img src="/src/assets/养老1.jpeg" alt="" class="yanglaotu1">
        <img src="/src/assets/养老2.png" alt="" class="yanglaotu2">
        <img src="/src/assets/养老3.png" alt="" class="yanglaotu3">
        <img src="/src/assets/养老4.jpeg" alt="" class="yanglaotu4">
       </div>
    </div>
  </div>
</template>
<script>
import Carousel from '@/components/icons/Carousel.vue';

export const cangyong= {
  data() {
    return {
      input: ''
    }
  }
};
export const zoumadeng={
  name: 'App',
  components: {
    Carousel
  }
};
export const daohanglan={
  name:'login-navigation-bottombar-logo'
};
</script>
<style>
  @media(max-width:767px){
    .login{
      font-size:14px;
      padding: 10px;
    }
  }
.login {
    height: 80vh;
    width: 40vh;
    background-color:white;
    border: 1px solid black;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    justify-content: space-around;
  }
.login-header{
  display: flex;
  flex-direction: colum;
  gap: 10px;
}
  .login-header-searchbox{
    display: flex;
  /* 水平方向居中对齐 */
  justify-content: center; 
   position: absolute;
   top: 10vh;
   left: 1.5vh;
  }
.login-header-searchbox1{
      height:8vh;
      width:31vh;
      align-items: start;
      justify-content: left;
      padding: 10px;
      margin-bottom: 10px;
}
.login-header-searchbutton{
  height: 4vh;
  width: 8vh;
  align-items: start;
  justify-content: left;
  padding: 8px;
  margin: 10px;
}
.login-main-price1{
  height: 15vh;
  width: 39.9vh;
  display: flex;
  justify-content: space-around;
  background-color: greenyellow;
  position: absolute;
  top: 18vh;
  left: 2.9vh;
}
.login-main-price1 img{
  display:block; /* 将图片转换为块级元素，使其独占一行 */
  margin: 0 auto; /* 水平居中图片 */
  max-width: 100%; /* 确保图片不超出容器宽度 */
}
.login-main-price1 p{
  margin-top: none; /* 设置文字与图片之间的间距 */
}
.login-main-price1-logo{
  padding: 3px;
  /* 水平方向居中对齐 */
  align-items:center;
  justify-content: center;
  margin: 10px;
}
.login-main-price2{
    display: flex;
    justify-content: space-around;
    height: 10vh;
    width: 39.9vh;
   background-color: white;
   position: absolute;
   top: 30vh;
   left: 2.9vh;
}
.fu-gongnenglan{
  text-align: center;
}
.fu-gongnenglan img{
  display:block; /* 将图片转换为块级元素，使其独占一行 */
  margin: 0 auto; /* 水平居中图片 */
  max-width: 100%; /* 确保图片不超出容器宽度 */
}
.fu-gongnenglan p{
  margin-top: none; /* 设置文字与图片之间的间距 */
}
.login-main-price2-logo{
  padding: 2px;
  /* 水平方向居中对齐 */
  align-items:center;
  justify-content: center;
  margin: 1px;
}
.el-carousel__item h3 {
    color:blue;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }
  .login-navigation-bottombar{
    display: flex;
    justify-content: space-around;
    height: 5vh;
    width: 39.9vh;
   background-color: white;
   position: absolute;
   top: 86.2vh;
   left: 2.9vh;
  }
  .login-navigation-bottombar-logo{
  text-align: center;
}
.login-navigation-bottombar-logo img{
  display: block; /* 将图片转换为块级元素，使其独占一行 */
  margin: 0 auto; /* 水平居中图片 */
  max-width: 100%; /* 确保图片不超出容器宽度 */
}
.login-navigation-bottombar-logo p{
  margin-top: none; /* 设置文字与图片之间的间距 */
}
.login-main-activities{
  position: absolute;
  top: 38vh;
  left: 8vh;
}
.yanglaotu{
  text-align: center;
}
.yanglaotu1{
  height: 12vh;
  width: 18vh;
}
.yanglaotu2{
  height: 12vh;
  width: 18vh;
}
.yanglaotu3{
  height: 12vh;
  width: 18vh;
}
.yanglaotu4{
  height: 12vh;
  width: 18vh;
}
</style>
<style  scoped>
.el-carousel {
  width: 300px;
  height: 200px;
}

/* 设置图片的样式 */
.carousel-image {
  width: 100%;
  height: 100%;
  /* 控制图片的缩放和裁剪方式 */
  object-fit: cover; 
}
.block{
  height: 18vh;
  width: 39.9vh;
  position: absolute;
  top: 45vh;
  left: 3vh;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
